#main{

}
#map{
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -150px;
        width: 300px;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateZ(45deg);
        background-color: #ddd;
        
}
.map-unit{
        width: 30px;
        height: 30px;
        float: left;
        cursor: pointer;
        text-align: center;
}

.map-unit.selected{
        background-color: red;
       
}
.tank{
        width: 30px;
        height: 30px;
        position: absolute;
        transform: translateZ(30px);
        transform-style: preserve-3d;

        /* offset-path: path("M288.4,129.9l-26.6,4.3c-0.8,0.2-1.5,0.6-1.9,1.3l-18.2,26.6c-0.6,0.9-1.6,1.4-2.6,1.3l-78.2-4.9c-1.1-0.1-2.1-0.7-2.5-1.8l-25.6-60.9c-0.6-1.3-2-2-3.4-1.7l-24.7,6.5c-0.5,0.1-1,0.4-1.4,0.9l-56.1,63c-1.1,1.2-3.1,3.9-1.2,6l77.9,68.3c2.4,1.4,1.8,4.9,1.3,6.1l-26.6,59.7c-0.4,0.8-0.3,1.7,0.1,2.5l17.8,35.8l13.4,29.4c0.4,0.5,5.9,3.5,6.5,3.6l31.8,9l42,9.5c0.3-0.7,0.4-3.3,0.2-4.1l-20.2-56.6c-0.4-1.2-4.2-8.8-0.7-10.3l46.8-32.6l44.3-36.4c-0.2-3.1-1.5-6.8-1.9-8l-3-8.4c-0.6-2,1.1-4,3.2-3.7l109,14.4c1.3,0.2,2.6-0.5,3.1-1.7l7.8-18c0.5-1.2,0.2-2.6-0.8-3.4l-66.8-57.3l-39.9-37.7C290.2,130,289.3,129.8,288.4,129.9z");
    animation: move 15s linear infinite; */
}
.a1,
		.a2,
		.a3{
			position: absolute;
			width: 30px;
			height: 30px;
		}
		.a1 {
			background-color: #05afd1;
		}
		.a2 {
			background-color: #049dbc;
			transform:translate3d(15px,0,-15px) rotateY(90deg);
		}
		.a3 {
			background-color: #048ca7;
			transform:translate3d(0px,15px,-15px) rotateX(90deg);
		}

div {

    }


/* 
    @keyframes move {
        100% {
            offset-distance: 100%;
        }
    }
    
 */

